<template>

  <div class="box-centent">
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'salon' }">创客沙龙</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'match' }">双创大赛</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="details-box">
      <el-image style="width: 460px; height: 240px; border-radius:8px" :src="url"></el-image>
      <div class="details-content">
        <div class="title">基于车联网的自动红绿灯控制系统</div>
        <div class="content">
          <div class="list">参赛对象:&nbsp;&nbsp;&nbsp;&nbsp;在校大学生</div>
          <div class="list">报名时间:&nbsp;&nbsp;&nbsp;&nbsp;2020-01-16至2020-01-22</div>
          <div class="list">比赛时间:&nbsp;&nbsp;&nbsp;&nbsp;2020-01-16至2020-01-22</div>
          <div class="list">评审时间:&nbsp;&nbsp;&nbsp;&nbsp;2020-01-16至2020-01-22</div>
          <div class="list">所属领域:&nbsp;&nbsp;&nbsp;&nbsp;信息楼5楼</div>
        </div>
      </div>
      <el-button type="danger">我要报名</el-button>
    </div>
    <div class="prospectus-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="赛事详情" name="first">
          <div class="prospectus-content">

            <div class="details">
              <div class="details-title">1:&nbsp;&nbsp;&nbsp;&nbsp;基本信息</div>
              <div class="details-list">
                计算机软件设计大赛以企业真实场景和实际数据为基础的高端算法竞赛，旨在提升高校学生技术应用能力。每个参赛队可在网站完成报名。参赛队员应是学校的在册和在校学生。

              </div>
              <div class="details-list">
                参赛队伍在网站填写报名表，打印后由所在学校（或学院）教务部门盖章，并提交报名表的扫描件。此外：
              </div>
              <div class="details-list">
                1.1 提交作品应为参赛成员原创，组委会有权要求提供原创性说明，如弄虚作假，组委会有权取消相应的奖项和奖励，并由参赛成员承担相应后果；
              </div>
              <div class="details-list">
                1.2 每支参赛队最多 3 名队员，参赛队员原则上只允许调整一次，最迟必须在复赛提交作品前以书面形式向专家委员会主任提出，获得批准后方能调整参赛队员；
              </div>
              <div class="details-list">
                1.3 每个参赛队必须有一名教练，最多两名。教练必须是参赛队所属高等学校的正式教师。一位教练可以作为多支参赛队的代表，负责竞赛活动中的指导和联系等工作。教练必须保证所
                有队员符合本规程的规定
              </div>
              <div class="details-list">
                1.4 初赛报名截止日期为 2018 年 5 月 31 日。 </div>
            </div>
            <div class="details">
              <div class="details-title">2:&nbsp;&nbsp;&nbsp;&nbsp;作品要求</div>
              <div class="details-list">
                本次竞赛的参赛作品须为具有一定功能的原创性应用程序（App），该 App 应基于 iOS 系统设计开发，并以苹果公司的产品组合及开发工具为基础。鼓励参赛队伍下载使用 Swift 语言进行开发。作品主题须紧扣竞赛推荐的应用领域及其他社会关注的热点难点问题，包括但不限于健康医疗、环境保护、防洪救灾、教育、养老、安全及大数据应用等。参赛者可自由命题，自行搜集、获取相关数据，提供解决方案并能在移动设备上实际运行。参赛队伍须将参赛作品上传至本次竞赛官方网站。在上传参赛作品时，各参赛队须按本规程的要求提交参赛作品相关
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="备战资源" name="second">
          <div class="prospectus-content">
            <div class="details">
              <div class="details-title">1:&nbsp;&nbsp;&nbsp;&nbsp;基本信息</div>
              <div class="details-list">
                计算机软件设计大赛以企业真实场景和实际数据为基础的高端算法竞赛，旨在提升高校学生技术应用能力。每个参赛队可在网站完成报名。参赛队员应是学校的在册和在校学生。

              </div>
              <div class="details-list">
                参赛队伍在网站填写报名表，打印后由所在学校（或学院）教务部门盖章，并提交报名表的扫描件。此外：
              </div>
              <div class="details-list">
                1.1 提交作品应为参赛成员原创，组委会有权要求提供原创性说明，如弄虚作假，组委会有权取消相应的奖项和奖励，并由参赛成员承担相应后果；
              </div>
              <div class="details-list">
                1.2 每支参赛队最多 3 名队员，参赛队员原则上只允许调整一次，最迟必须在复赛提交作品前以书面形式向专家委员会主任提出，获得批准后方能调整参赛队员；
              </div>
              <div class="details-list">
                1.3 每个参赛队必须有一名教练，最多两名。教练必须是参赛队所属高等学校的正式教师。一位教练可以作为多支参赛队的代表，负责竞赛活动中的指导和联系等工作。教练必须保证所
                有队员符合本规程的规定
              </div>
              <div class="details-list">
                1.4 初赛报名截止日期为 2018 年 5 月 31 日。 </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 18px 0;
  /deep/.el-breadcrumb {
    flex: 1;
  }
  .nav-search {
    display: flex;
    align-items: center;
    /deep/ .el-input {
      width: 85%;
      .el-input__inner {
        border-radius: 12px;
        height: 21px;
        line-height: 21px;
        padding-left: 15px;
        background: #f5f7ff;
      }
    }
    /deep/ .el-input__prefix {
      left: 115px;
      .el-icon-search {
        line-height: 21px;
      }
    }
  }
}
.details-box {
  display: flex;

  align-items: center;
  padding: 28px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  .details-Image {
    width: 460px;
    height: auto;
  }

  .details-content {
    flex: 1;
    padding: 0 61px 0 20px;

    .title {
      font-size: 18px;
      font-weight: 900;
      color: rgba(6, 17, 37, 1);
    }
    .content {
      padding-top: 24px;
      font-size: 16px;
      color: rgba(19, 35, 64, 1);
      .list {
        margin-bottom: 17px;
      }
    }
  }
  /deep/.el-button {
    padding: 10px 44px;
  }
  /deep/.el-button--primary {
    background: linear-gradient(
      314deg,
      rgba(245, 131, 146, 1) 0%,
      rgba(254, 81, 96, 1) 100%
    );
  }
}
.prospectus-box {
  padding: 10px 0 97px 0;
  /deep/ .el-tabs {
    .el-tabs__nav-wrap {
      background-color: none !important;
      &::after {
        background-color: transparent;
      }
      .el-tabs__item {
        font-weight: 900;
        font-size: 20px;
        color: rgba(6, 17, 37, 1);
      }

      .el-tabs__item.is-active {
        color: none !important;
      }
      .el-tabs__item:hover {
        color: none;
      }
    }
  }
}
.prospectus-content {
  .details {
    font-size: 16px;
    color: rgba(36, 55, 89, 1);
    line-height: 30px;
    margin-top: 15px;
    .details-title {
      font-size: 18px;
      color: rgba(19, 35, 64, 1);
      font-weight: 500;
    }
    .details-list {
      width: 1200px;

      margin-top: 15px;
    }
  }
}
</style>
